<template>
    <div>
        <el-card style="margin: 10px 5px; height:min-content;">
            <div style="align-items: center; text-align: left; font-weight: bolder; font-size: large;">编辑文章</div>
            <el-form :model="form" label-width="80px" style="padding-right: 20px;" :rules="rules" ref="formRef">
                <el-form-Item label="标题" prop="title">
                    <el-Input v-model="form.title" placeholder="用户名"></el-Input>
                </el-form-Item>
                <el-form-Item label="上传封面">
                    <el-upload class="upload-demo" :action="$baseUrl+'/upload'"
                        :headers="{ token: user.token }" :show-file-list="false" drag :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="form.image" :src="form.image" style="object-fit:cover; width: 100%; height: 100%;">
                        <i v-else class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-Item>
                <el-form-Item label="内容">
                    <!-- <MdEditor :content="form.content" height="500px" @update:content="getEditorContent" @copy-code-success="handleCopyCodeSuccess"  /> -->
                    <v-md-editor v-model="form.content" :disabled-menus="[]" height="500px" @copy-code-success="handleCopyCodeSuccess"   @upload-image="handleUploadImage"/>
                </el-form-Item>
                <div style="text-align: center;">
                    <el-button type="primary" @click="update">
                        保存
                    </el-button>
                </div>
            </el-form>
        </el-card>
    </div>

</template>

<script>
import axios from 'axios';
/* import MdEditor from '@/components/VMDEditor.vue' */
export default{
  /*   components: {
        MdEditor
     }, */
    data(){
        return{
            user:JSON.parse(localStorage.getItem('user'||'{}')),
            form:JSON.parse(this.$route.query.form),
        }
    },
    methods:{    
        handleUploadImage(event, insertImage, files) {
        const formData = new FormData();
        formData.append("file", files[0]);
      console.log(formData);
        let user = JSON.parse(localStorage.getItem("user" || '{}'))
        if (user != null) {

          axios.post(this.$baseUrl + '/upload', formData,
            {
              // 因为我们上传了图片,因此需要单独执行请求头的Content-Type
              headers: {
                // 表示上传的是文件,而不是普通的表单数据
                'Content-Type': 'multipart/form-data',
                'token': user.token
              }
            }
          ).then(res => {
            console.log(res);
            if (res.data.code == 1) {
              insertImage({ url: res.data.data });
            }
          })
        }
      },
        update(){
            this.$request.put('/novel/update',this.form).then(res=>{
                if(res.code=='1'){
                    this.$message.success('保存成功')
                    this.$router.push('/novelList')
                }
                else{
                    this.$message.error('保存失败')
                }
            })

        },
        handleAvatarSuccess(response,file,fileList) {
            console.log("1");
            console.log(response,file,fileList);
            this.form.image=response.data;
         },
      
         beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || 'Image/png';

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG或 png 格式!');
                }

                return isJPG;
            },
    }

}

</script>

<style>
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border-radius: 50%;
  }
</style>